<template>
  <div class="pagebody">
    <HomeHeadeh></HomeHeadeh>

    <div class="head">
      <div class="container">
        <!-- 导航 -->
        <div class="navigation">
          <div class="nav_font">Pharmacy Captain Homepage</div>
          <img src="@/static/images/public/right_arrow.png" class="arrow">
          <div class="nav_font">Drug name</div>
          <img src="@/static/images/public/right_arrow.png" class="arrow">
          <div class="nav_font">Q&A List Page</div>
          <img src="@/static/images/public/right_arrow.png" class="arrow">
          <div class="nav_font" style="color:#616469;">Article Title</div>
        </div>
        <div class="head_title">
          <div class="head_title_font">
            Cancer Drugs
          </div>
        </div>
        <div class="cancerlist">
          <nuxt-link target="_blank" :to="'/department/' + item.id + '.html'" :class="diseaseId == item.id ? 'cancer_card cancer_card2' : 'cancer_card'" v-for="(item, index) in diseaseList" :key="index">{{ item.nameEn }}</nuxt-link>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="content">
        <div class="left">
          <div class="sketch">
            <div class="sketch_title">{{ diseaseInfo.nameEn }}</div>
            <div class="sketch_content">{{ diseaseInfo.drugD }}</div>
          </div>
          <druglist :drugList="drugList"></druglist>
          <medicinePrice :newsList="newsList"></medicinePrice>
        </div>
        <right></right>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import right from '@/components/right/right'
import medicinePrice from '@/components/news/medicinePrice'
import druglist from '@/components/drugs/druglist'
import { getDiseaseById,getDruglist,selectNewsList } from '@/api/api'
export default {
  components: {
    right,
    medicinePrice,
    druglist
  },
  data () {
    return {
      
    }
  },
  async asyncData ({ app, isDev, route, store, env, params, query, req, res, redirect, error }) {
    // 获取当前疾病ID
    let diseaseId = params.diseaseId;
    // 获取肿瘤科目下所有疾病
    let cancerList = await app.$axios.get(getDiseaseById + 2)
    // 获取当前的疾病详情
    let diseaseInfo = cancerList.data.diseaseList.filter(item => item.id == diseaseId);
    // 查询当前疾病下的药品列表
    let drugData = {
      "pageNum":"1",
      "pageSize":"18",
      "state":"1",
      "orderByColumn":"updateTime",
      "isAsc":"DESC",
      "diseaseNew":{"id":diseaseId}
    }
    let drugList = await app.$axios.post(getDruglist , drugData)
    // 查询新闻列表
    let newData = {
      "pageNum":"1",
      "pageSize":"10",
      "state":"1",
      "orderByColumn":"updateTime",
      "isAsc":"DESC",
    }
    let newsList = await app.$axios.post(selectNewsList , newData)

    return{
      diseaseId:diseaseId,
      diseaseList:cancerList.data.diseaseList,
      diseaseInfo:diseaseInfo[0],
      drugList:drugList.rows,
      newsList:newsList.rows,
    }
  },
}
</script>

<style lang="scss" scoped>
.pagebody {
  background-color: #FFF;

  .head {
    background: linear-gradient(180deg, rgba(229, 245, 255, 0.8) 0%, rgba(229, 245, 255, 0) 120%);
    // height: 500px;

    .navigation {
      display: flex;
      justify-content: flex-start;
      padding-top: 26px;
      align-items: center;

      .nav_font {
        font-size: 12px;
        color: #8A95A2;
        line-height: 12px;
        margin-right: 8px;
      }

      .arrow {
        width: 6px;
        height: 10px;
        margin-right: 8px;
      }
    }

    .head_title {
      margin-top: 24px;
      border-bottom: 1px solid #E5E8EB;

      .head_title_font {
        font-weight: bold;
        font-size: 24px;
        width: 158px;
        color: #0041A3;
        line-height: 72px;
        border-bottom: 6px solid #0041A3;
      }
    }

    .cancerlist {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      .cancer_card {
        margin-top: 24px;
        background: #FFFFFF;
        border-radius: 24px;
        padding: 0 24px;
        font-weight: 400;
        font-size: 20px;
        color: #2E343E;
        line-height: 52px;
        margin-right: 25px;
        cursor: pointer;
      }

      .cancer_card2 {
        background: #0078FF;
        color: #FFFFFF;
      }
    }
  }

  .content {
    margin-top: 50px;
    padding-bottom: 128px;
    display: flex;
    justify-content: space-between;

    .left {
      width: 824px;

      .sketch {
        background: rgba(232, 239, 255, 0.5);
        border-radius: 16px;
        padding: 32px;

        .sketch_title {
          font-size: 20px;
          font-weight: bold;
          line-height: 36px;
          color: #2E343E;
        }

        .sketch_content {
          margin-top: 14px;
          font-size: 18px;
          line-height: 36px;
          color: #2E343E;
        }
      }
    }
  }
}
</style>